<template>
  <div class="order-detail">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>工单详情</h2>
      <p>查看生产工单的详细信息</p>
    </div>

    <!-- 返回按钮 -->
    <el-card class="action-card" shadow="never">
      <div class="action-buttons">
        <el-button @click="handleBack" :icon="ArrowLeft">
          返回列表
        </el-button>
        <el-button type="primary" @click="handleRefresh" :icon="Refresh" :loading="loading">
          刷新
        </el-button>
      </div>
    </el-card>

    <!-- 详情内容 -->
    <el-card class="detail-card" shadow="never" v-loading="loading">
      <div class="detail-content" v-if="orderDetail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="工单编号">
            <el-tag type="info" size="large">{{ orderDetail.workorderCode }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="工单名称">
            <span class="detail-text">{{ orderDetail.workorderName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="生产对象">
            <span class="detail-text">{{ orderDetail.object }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="工单状态">
            <el-tag :type="getStateTagType(orderDetail.workorderState)" size="large">
              {{ getStateText(orderDetail.workorderState) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="进度">
            <div class="progress-container">
              <el-progress 
                :percentage="parseInt(orderDetail.progress)" 
                :color="getProgressColor(parseInt(orderDetail.progress))"
                :stroke-width="12"
                :show-text="true"
              />
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="工艺流程编码">
            <span class="detail-text">{{ orderDetail.processflowCode || '未设置' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="工艺流程名称" :span="2">
            <span class="detail-text">{{ orderDetail.processflowName || '未设置' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间" v-if="orderDetail.createTime">
            <span class="detail-text">{{ orderDetail.createTime }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="更新时间" v-if="orderDetail.updateTime">
            <span class="detail-text">{{ orderDetail.updateTime }}</span>
          </el-descriptions-item>
        </el-descriptions>

        <!-- 额外信息 -->
        <div class="additional-info" v-if="orderDetail.remark">
          <h3>备注信息</h3>
          <el-card class="remark-card">
            <p>{{ orderDetail.remark }}</p>
          </el-card>
        </div>
      </div>

      <!-- 无数据状态 -->
      <div v-else-if="!loading" class="empty-state">
        <el-empty description="工单信息不存在或已被删除">
          <el-button type="primary" @click="handleBack">返回列表</el-button>
        </el-empty>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Refresh } from '@element-plus/icons-vue'
import { getReadClient } from '@/Urls/AxiosHelper'

// 路由
const route = useRoute()
const router = useRouter()

// 接口类型定义
interface WorkorderDetail {
  id: number
  workorderCode: string
  workorderName: string
  object: string
  workorderState: number
  progress: string
  processflowId: number
  processflowCode?: string
  processflowName?: string
  createTime?: string
  updateTime?: string
  remark?: string
}

// 响应式数据
const loading = ref(false)
const orderDetail = ref<WorkorderDetail | null>(null)

// 方法
const getStateText = (state: number) => {
  const stateMap: { [key: number]: string } = {
    0: '待开始',
    1: '进行中',
    2: '已完成',
    3: '已暂停'
  }
  return stateMap[state] || '未知'
}

const getStateTagType = (state: number) => {
  const typeMap: { [key: number]: string } = {
    0: 'info',
    1: 'warning',
    2: 'success',
    3: 'danger'
  }
  return typeMap[state] || 'info'
}

const getProgressColor = (percentage: number) => {
  if (percentage < 30) return '#f56c6c'
  if (percentage < 70) return '#e6a23c'
  return '#67c23a'
}

// 获取工单详情
const fetchOrderDetail = async () => {
  try {
    loading.value = true
    const orderId = route.params.id
    
    console.log('获取工单详情，ID:', orderId)
    
    // 根据不同的工单ID显示不同的模拟数据
    const mockDataMap: Record<string, WorkorderDetail> = {
      '1': {
        id: 1,
        workorderCode: 'WK-20250928-122223',
        workorderName: '自动化吹风机',
        object: '吹风机',
        workorderState: 0,
        progress: '56',
        processflowId: 3,
        processflowCode: 'CF-003',
        processflowName: '自动洗衣机生产流程',
        createTime: '2025-09-28 12:22:23',
        updateTime: '2025-09-28 14:30:15',
        remark: '这是一个自动化吹风机的生产工单，需要严格按照工艺流程执行。'
      },
      '2': {
        id: 2,
        workorderCode: 'WK-20250928-143045',
        workorderName: '智能手机组装',
        object: '智能手机',
        workorderState: 1,
        progress: '78',
        processflowId: 1,
        processflowCode: 'CF-001',
        processflowName: '智能手机生产工艺',
        createTime: '2025-09-28 14:30:45',
        updateTime: '2025-09-28 16:45:30',
        remark: '智能手机组装工单，包含屏幕、主板、电池等组件的装配流程。'
      },
      '3': {
        id: 3,
        workorderCode: 'WK-20250928-091512',
        workorderName: '电动汽车电池包',
        object: '电池包',
        workorderState: 2,
        progress: '100',
        processflowId: 2,
        processflowCode: 'CF-002',
        processflowName: '电动汽车电车组装工艺',
        createTime: '2025-09-28 09:15:12',
        updateTime: '2025-09-28 18:20:00',
        remark: '电动汽车电池包生产工单，已完成所有生产工序。'
      },
      '4': {
        id: 4,
        workorderCode: 'WK-20250928-160830',
        workorderName: '笔记本电脑主板',
        object: '主板',
        workorderState: 3,
        progress: '25',
        processflowId: 4,
        processflowCode: 'CF-004',
        processflowName: '笔记本电脑主板质量控制工艺',
        createTime: '2025-09-28 16:08:30',
        updateTime: '2025-09-28 17:15:45',
        remark: '笔记本电脑主板生产工单，因质量问题暂停生产，待质量改进后继续。'
      },
      '5': {
        id: 5,
        workorderCode: 'WK-20250928-110205',
        workorderName: '智能手表',
        object: '智能手表',
        workorderState: 1,
        progress: '45',
        processflowId: 5,
        processflowCode: 'CF-005',
        processflowName: '智能手表组装工艺',
        createTime: '2025-09-28 11:02:05',
        updateTime: '2025-09-28 15:30:20',
        remark: '智能手表生产工单，包含表盘、表带、芯片等组件的精密装配。'
      }
    }
    
    // 根据工单ID获取对应的数据，如果没有则使用默认数据
    const mockData = mockDataMap[orderId as string] || {
      id: Number(orderId),
      workorderCode: `WK-20250928-${String(orderId).padStart(6, '0')}`,
      workorderName: `工单${orderId}`,
      object: '未知产品',
      workorderState: 0,
      progress: '0',
      processflowId: 1,
      processflowCode: 'CF-001',
      processflowName: '默认工艺流程',
      createTime: '2025-09-28 00:00:00',
      updateTime: '2025-09-28 00:00:00',
      remark: '这是一个默认的工单详情。'
    }
    
    orderDetail.value = mockData
    console.log('工单详情加载完成:', orderDetail.value)
  } catch (error) {
    console.error('获取工单详情失败:', error)
    ElMessage.error('获取工单详情失败')
  } finally {
    loading.value = false
  }
}

// 返回列表
const handleBack = () => {
  router.push('/Orderslist')
}

// 刷新详情
const handleRefresh = () => {
  fetchOrderDetail()
}

// 生命周期
onMounted(() => {
  fetchOrderDetail()
})
</script>

<style scoped>
.order-detail {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.action-card {
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.detail-card {
  margin-bottom: 20px;
}

.detail-content {
  padding: 20px 0;
}

.detail-text {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.progress-container {
  width: 200px;
}

.additional-info {
  margin-top: 30px;
}

.additional-info h3 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.remark-card {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

.remark-card p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}

.empty-state {
  padding: 40px 0;
}

/* 详情描述样式优化 */
:deep(.el-descriptions) {
  margin-top: 0;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
  background-color: #f5f7fa;
  width: 120px;
}

:deep(.el-descriptions__content) {
  color: #303133;
  font-weight: 500;
}

:deep(.el-descriptions__body) {
  background-color: #fafbfc;
}

/* 标签样式 */
:deep(.el-tag) {
  font-weight: 600;
  border-radius: 4px;
}

/* 进度条样式 */
:deep(.el-progress) {
  margin: 0;
}

:deep(.el-progress__text) {
  font-weight: 600;
  color: #303133;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-detail {
    padding: 10px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .action-buttons .el-button {
    width: 100%;
  }
  
  .progress-container {
    width: 100%;
  }
  
  :deep(.el-descriptions) {
    font-size: 12px;
  }
  
  :deep(.el-descriptions__label) {
    width: 80px;
  }
}
</style>

